<template>
  <div class="ecommerce">
    <el-col>
      <CardList :staticData="staticData" :key="staticKey"></CardList>
    </el-col>
    <div class="art-custom-card card-list">
      <div class="card-header">
        <div class="title">交易概况及趋势</div>
      </div>
      <carAnalysis :overviewStatic="tradeList" v-if="tradeList.length"></carAnalysis>
    </div>
    <!-- <div class="art-custom-card">
      <div class="card-header">
        <div class="title">用户概况</div>
      </div>
      <dataInfo></dataInfo>
    </div> -->
    <el-row :gutter="20">
      <template v-for="n in 2" :key="n">
        <el-col :sm="24" :md="24" :lg="12">
          <NewUser :type="n" />
        </el-col>
      </template>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import NewUser from './widget/NewUser.vue'
import dataInfo from './widget/dataInfo.vue'
import carAnalysis from './widget/carAnalysis.vue'
import CardList from './widget/CardList.vue'
import { getTradeAnalytics, getTradeStatic } from '@/api/questionbank'

const staticData = ref({})
const staticKey = ref(0)

const getBasicInfo = async () => {
  const res = await getTradeAnalytics()
  if (res.code === '00000') {
    staticData.value = res.data
    staticKey.value = new Date().getDate()
  }
}

const tradeList = ref([])
const getTradeData = async () => {
  const res = await getTradeStatic({ days: 30 })
  if (res.code === '00000') {
    tradeList.value = res.data
  }
}

onMounted(() => {
  getBasicInfo();
  getTradeData();
})
</script>

<style lang="scss" scoped>
@use './style';

.card-list {
  margin-bottom: 20px;
}
</style>
